import { lazy, Suspense } from 'react'
import { createHashRouter, Navigate, RouterProvider } from 'react-router-dom'
import MainLayout from '../layouts/MainLayout'
import { AuthGuard } from './guards'
const Login = lazy(() => import('../views/Login/Login.tsx'))

const Home = lazy(() => import('../views/Home'))
const Mine = lazy(() => import('../views/Mine'))
const HouseAcceptance = lazy(() => import('../views/HouseAcceptance'))
const LeaseTerminationManage = lazy(() => import('../views/LeaseTerminationManage'))
const AcceptanceDetail = lazy(() => import('../views/AcceptanceDetail'))
const ContractInfo = lazy(() => import('../views/ContractInfo'))
const FacilityInfo = lazy(() => import('../views/FacilityInfo'))
const AcceptanceResult = lazy(() => import('../views/AcceptanceResult'))
const LeaseAudit = lazy(() => import('../views/LeaseAudit'))
const LeaseResult = lazy(() => import('../views/LeaseResult'))

const router = createHashRouter([
  { path: '/', element: <Navigate to="/login" replace /> },
  {
    path: '/login',
    element: (
      <Suspense fallback={null}>
        <Login />
      </Suspense>
    ),
  },
  {
    element: <MainLayout />,
    children: [
      {
        path: '/home',
        element: (
          <Suspense fallback={null}>
            <Home />
          </Suspense>
        ),
      },
      {
        path: '/acceptance',
        element: (
          <Suspense fallback={null}>
            <HouseAcceptance />
          </Suspense>
        ),
      },
      {
        path: '/acceptance/:id',
        element: (
          <Suspense fallback={null}>
            <AcceptanceDetail />
          </Suspense>
        ),
      },
      {
        path: '/contract/:id',
        element: (
          <Suspense fallback={null}>
            <ContractInfo />
          </Suspense>
        ),
      },
      {
        path: '/facility/:id',
        element: (
          <Suspense fallback={null}>
            <FacilityInfo />
          </Suspense>
        ),
      },
      {
        path: '/acceptance-result',
        element: (
          <Suspense fallback={null}>
            <AcceptanceResult />
          </Suspense>
        ),
      },
      {
        path: '/lease',
        element: (
          <Suspense fallback={null}>
            <LeaseTerminationManage />
          </Suspense>
        ),
      },
      {
        path: '/lease-audit/:id',
        element: (
          <Suspense fallback={null}>
            <LeaseAudit />
          </Suspense>
        ),
      },
      {
        path: '/lease-result',
        element: (
          <Suspense fallback={null}>
            <LeaseResult />
          </Suspense>
        ),
      },
      {
        element: <AuthGuard />,
        children: [
          {
            path: '/mine',
            element: (
              <Suspense fallback={null}>
                <Mine />
              </Suspense>
            ),
          },
        ],
      },
    ],
  },
])

export default function AppRouter() {
  return <RouterProvider router={router} />
}
